<script setup lang="ts">
import {ref, shallowRef} from "vue";
import * as echarts from "echarts";
// import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src
    const myChart = ref<HTMLElement>();  //也可以用const myChart = ref<any>();

    console.log(myChart);
    const myCharts = shallowRef<any>();
    setTimeout(() => {
      // 绘制图表
      myCharts.value = echarts.init(myChart.value!);
      myCharts.value.setOption({
        title : {
          text: '西安局集团公司职工培训部关于做好2023年新工岗前培训的通知',
          subtext: '实施时间：2024-05-06 至 2024-08-24     覆盖人数：100人   学习人数：99人   累计时长：80小时',
          padding: [5, 0, 0, 80], // 调整文本内边距
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow' // 坐标轴指示器，坐标轴触发有效
          },
          formatter: function (params: any) {
            const item = params[0];
            return `${item.name}：<span style="color: #3C8DF9">${item.data}%</span>`;
          }
        },
        grid: {
          top: 100, // 增加 top 值以腾出更多空间放置 y 轴名称
        },
        // legend: {
        //   data:['蒸发量','降水量']
        // },
        xAxis: {
          data: ['西安站', '西安车务段', '西安西站', '新丰镇站', '安康车务段', '安康东站','汉中车务段','宝鸡东站','宝鸡车务段','铜川车务段','延安车务段','延安运营维修段','韩城车务段'],
          axisLabel: {
            rotate: 45, // 旋转45度
          }
        },

        yAxis: {
          name: '完成度',
          nameLocation: 'end',
          axisLabel: {
            formatter: '{value}%', // 在标签上添加百分号
          },
          nameTextStyle: {
            align: 'right',
            padding: [0, 0, 10, 0],
            fontSize: 14,
            fontWeight: 'bold', // 加粗
            fontStyle: 'italic', // 斜体
            color: '#000', // 颜色
          },
        },
        series: [
          {
            name: "",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20,5, 20, 36, 10, 10, 20,25],
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1, // 表示渐变方向，从上到下
                  [
                    {offset: 0, color: '#3E85E3'},
                    {offset: 1, color: '#96BDEE'}
                  ]
              )
            },
            barWidth: '30%',  // 设置柱状图的宽度为 50%
          },
        ],
      });
    }, 10);

</script>

<template>
  <div ref="myChart" :style="{ width: '100%', height: '400px' }"></div>
</template>

<style scoped>

</style>